'use client'
import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import apiService from '@/service/apiService';
import { useRouter } from 'next/navigation';
import { useSearchParams } from 'next/navigation';
/**
 * 登录页面组件
 * 提供用户登录功能，包含用户名和密码输入框以及登录按钮
 */
export default function LoginPage() {
    // 定义状态管理表单输入
    const searchParams = useSearchParams();
    const initialUsername = searchParams.get('username') || '';
    const router = useRouter();
    const [username, setUsername] = useState(initialUsername);
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    // 从URL参数中获取用户名


    /**
     * 处理登录表单提交
     * @param e 表单提交事件
     */
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        setError('');
        // 调用登录服务
        apiService.post('login', { username, password })
            .then((response) => {
                // 登录成功逻辑
                console.log('登录成功', response);
                // 实际应用中这里会进行路由跳转或设置认证状态
                router.push('/home');
            })
            .catch((error) => {
                setError(error.message || '登录失败');
            })
            .finally(() => {
                setIsLoading(false);
            });
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
            <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-8">
                <div className="text-center mb-8">
                    <Image
                        src="/next.svg"
                        alt="Logo"
                        width={80}
                        height={24}
                        className="mx-auto mb-4"
                    />
                    <h1 className="text-2xl font-bold text-gray-900">登录账户</h1>
                </div>

                {error && (
                    <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-md">
                        {error}
                    </div>
                )}

                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
                            用户名
                        </label>
                        <input
                            type="text"
                            id="username"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="请输入用户名"
                        />
                    </div>

                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
                            密码
                        </label>
                        <input
                            type="password"
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="请输入密码"
                        />
                    </div>

                    <div className="flex items-center justify-between">
                        <div className="flex items-center">
                            <input
                                type="checkbox"
                                id="remember-me"
                                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
                                记住我
                            </label>
                        </div>
                        <Link href="#" className="text-sm font-medium text-blue-600 hover:text-blue-500">
                            忘记密码?
                        </Link>
                    </div>

                    <button
                        type="submit"
                        disabled={isLoading}
                        className="w-full flex justify-center items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
                    >
                        {isLoading ? (
                            <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full"></div>
                        ) : (
                            '登录'
                        )}
                    </button>
                </form>

                <div className="mt-6 text-center">
                    <p className="text-sm text-gray-600">
                        还没有账户?{' '}
                        <Link href="/register" className="font-medium text-blue-600 hover:text-blue-500">
                            立即注册
                        </Link>
                    </p>
                </div>
            </div>
        </div>
    );
}